<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>02-案例-拼接名字-监听属性</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .container {
            width: 350px;
        }
        p {
            width: 350px;
            padding: 20px;
            line-height: 32px;
            font-size: 20px;
        }
        .form-inline div label {
            display: flex;
            align-items: center;
        }
        .form-inline div label span {
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h3>拼接名字-使用监听属性</h3>
            <hr>
            <form action="#" class="form-inline">
                <div class="form-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                </div>
                <div class="form-group">
                    <label>
                        <span>名称：</span>
                        <input type="text" class="form-control" v-model="lastName">
                    </label>
                </div>
            </form>
            <p class="bg-success">{{ getFullName }}</p>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#app',
            data: {
                firName: '',
                lastName: '',
                getFullName: ''
            },
            methods: {
                getName() {
                    // 简化代码
                    let { firName: a, lastName: b } = this
                    a = a ? a : ' '
                    b = b ? b : ' '

                    this.getFullName = `${this.handleStr(a)} - ${this.handleStr(b)}`
                },
                handleStr(str) {
                    return str[0].toUpperCase() + str.slice(1)
                }
            },
            // 监听属性
            watch: {
                firName: {
                    handler(newVal, oldVal) {
                        // console.log('监听到改变了')
                        // console.log(newVal, oldVal)

                        // this 指向谁？
                        // setTimeout(() => {
                        //     console.log(this) // window
                        //     this.getName()
                        // }, 1000)
                        // var that = this
                        setTimeout(function() {
                            // console.log(this) // window
                            this.getName()
                        }.bind(this), 100)
                    }
                },
                // 监听属性的简写 - 条件是没有初次调用，或者深层监听才可以简写
                lastName(newVal, oldVal) {
                    // console.log(newVal, oldVal)
                    this.getName()
                }
            }
        })
    </script>
</body>
</html>